<template>
    <div class="example1-wrapper">
        <div id="chart1" style="float:left;width:600px;height:300px">
        </div>
        <div style="float:right;width:500px;height:500px">
            <canvas id="chart2"></canvas>
        </div>
        <div style="float:right;width:500px;height:500px">
            <canvas id="chart3"></canvas>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    export default {
        inject: ['reload'],
        data () {
            const user = sessionStorage.getItem('user')
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            return {
                username: '',
                mername: ''
            }
        },
        created () {
            // this.getincome()
        },
        mounted () {
            this.getincome()
        },
        methods: {
            /**
             * 获取页面数据
             *
             * @return {Promise} promise 对象
             */
            getincome () {
                const qs = require('qs')
                this.axios({
                    url: '/getincome/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': JSON.parse(sessionStorage.getItem('user'))
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        // 折线图数据
                        const labelstmp = []
                        const chartdata = []
                        for (const i in res.data.result_data) {
                            this.$set(labelstmp, i, res.data.result_data[i].endtime)
                            this.$set(chartdata, i, res.data.result_data[i].income_total)
                        }
                        // this.$set(this.lineoption.xAxis, 'data', labelstmp)
                        // this.$set(this.lineoption.series, 'data', chartdata)
                        const lineoption = {
                            xAxis: {
                                type: 'category',
                                data: labelstmp
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: chartdata,
                                    type: 'line'
                                }
                            ]
                        }
                        const myChart = echarts.init(document.getElementById('chart1'))
                        myChart.setOption(lineoption)
                        // this.option.xAxis.data = labelstmp
                        // this.option.series.data = chartdata
                        // 饼图数据
                        // const t1 = []
                        // const t2 = []
                        // if (res.data.cloth_result.length < 5) { // 小于五项全部显示
                        //     for (const index in res.data.cloth_result) {
                        //         this.$set(t1, index, res.data.cloth_result[index][0])
                        //         this.$set(t2, index, res.data.cloth_result[index][1])
                        //         // t1[index] = res.data.cloth_result[index][0]
                        //         // t2[index] = res.data.cloth_result[index][1]
                        //     }
                        //     this.$set(this.data2, 'labels', t1)
                        //     this.$set(this.data2.datasets[0], 'data', t2)
                        // } else { // 大于5项，第5项显示为其他
                        //     const tmp = { value: 0, num: 0 }
                        //     for (tmp.value; tmp.value < res.data.cloth_result.length; tmp.value++) {
                        //         if (tmp.value < 4) {
                        //             this.$set(t1, tmp.value, res.data.cloth_result[tmp.value][0])
                        //             this.$set(t2, tmp.value, res.data.cloth_result[tmp.value][1])
                        //         } else {
                        //             tmp.num += res.data.cloth_result[tmp.value][1]
                        //         }
                        //     }
                        //     this.$set(t1, 4, '其他')
                        //     this.$set(t2, 4, tmp.num)
                        //     this.$set(this.data2, 'labels', t1)
                        //     this.$set(this.data2.datasets[0], 'data', t2)
                        // }
                    }
                })
            },
            getdata () {
                return this.data
            }

        }
    }
</script>

<style scoped>
</style>
